<template>
    <div class="my-stepper" :class="{
        'h-full': props.hFull
    }">
        <v-stepper color="primary" hide-actions v-model="value" :item-title="props.itemTitle"
            :item-value="props.itemValue">
            <!-- 普通類型 -->
            <v-stepper-header class="my-stepper-header" :class="mobile ? 'pl-2 pr-2 pt-2 pb-2' : 'pl-6 pr-6 pt-4 pb-4'"
                v-if="props.type == 'default'">
                <template v-for="(item, index) in props.items" :key="item.value">
                    <v-stepper-item color="primary" :value="item[props.itemValue]" :editable="props.editable">
                        <!-- 文字内容 -->
                        <template v-slot:default>
                            <!-- 标题 -->
                            <div class="flex">
                                <span class="text-[14px] leading-[18px] font-[500] text-left tracking-[0.001em]" :class="{
                                    'text-primary': value == item[props.itemValue],
                                    'text-text--secondary': value != item[props.itemValue]
                                }">
                                    {{ $t(item[props.itemTitle]) }}
                                </span>
                                <slot :name="`${item[props.itemValue]}-status`"></slot>
                            </div>
                            <!-- 描述 -->
                            <div class="text-left mt-1 text-[12px] leading-[16px] font-[400] tracking-[0.001em]" :class="{
                                'text-primary': value == item[props.itemValue],
                                'text-text--secondary': value != item[props.itemValue]
                            }" v-if="item[props.itemDesc]">{{ item[props.itemDesc] }}</div>
                        </template>
                        <!-- 前图标 -->
                        <template v-slot:icon>
                            <div class="text-[14px] leading-[18px] font-[500]" :class="{
                                'text-text--secondary': value != item[props.itemValue]
                            }">{{ item.label || item[props.itemValue] }}</div>
                        </template>
                    </v-stepper-item>
                    <!-- 分割线 -->
                    <v-divider :thickness="2" v-if="index != props.items.length - 1"></v-divider>
                </template>
            </v-stepper-header>
            <!-- 特殊類型 選項卡 -->
            <v-stepper-header v-if="props.type == 'tabs'" class="my-stepper-header my-stepper-tabs-header"
                :class="mobile ? 'pl-2 pr-2 pt-2 pb-2' : 'pl-6 pr-6 pt-4 pb-4'">
                <template v-for="(item, index) in props.items" :key="item.value">
                    <v-stepper-item :value="item[props.itemValue]" class="my-stepper-item mr-2" editable>
                        <template v-slot:default>
                            <v-btn class="!min-w-[90px] !h-[40px] !pt-0 !pb-0 !shadow-none" :class="{
                                '!bg-foucs-bg': value == item[props.itemValue],
                                '!pl-4': !mobile,
                                '!pr-4': !mobile,
                                '!pl-1': mobile,
                                '!pr-1': mobile,
                            }">
                                <div class="!normal-case" :class="{
                                    'text-text--secondary': value != item[props.itemValue],
                                    'text-text--black': value == item[props.itemValue]
                                }">{{ $t(item[props.itemTitle]) }}</div>
                            </v-btn>
                        </template>
                    </v-stepper-item>
                </template>
            </v-stepper-header>
            <!-- 主要内容 -->
            <v-stepper-window class="my-stepper-window ml-0 mr-0 mt-0 mb-0">
                <v-stepper-window-item class="my-stepper-window-item" v-for="(item, index) in props.items"
                    :key="`${item[props.itemValue]}-content`" :value="item[props.itemValue]">
                    <slot :name="`${item[props.itemValue]}-content`"
                        v-if="viewList.indexOf(item[props.itemValue]) != -1"></slot>
                </v-stepper-window-item>
            </v-stepper-window>
        </v-stepper>
    </div>
</template>

<script lang="ts" setup>
// 当前是否是手机端
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
import { ref, watch, nextTick } from 'vue';
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
    // 是否鋪滿高度
    hFull: {
        type: Boolean,
        default: true
    },
    // 列表項
    items: {
        type: Array as any,
        default: []
    },
    // 是否可以點擊切換
    editable: {
        type: Boolean,
        default: false
    },
    // 標題字段
    itemTitle: {
        type: String,
        default: "title"
    },
    // 描述字段
    itemDesc: {
        type: String,
        default: "desc"
    },
    // 值字段
    itemValue: {
        type: String,
        default: "value"
    },
    // 類型 defautl 普通，tabs 選項卡
    type: {
        type: String,
        default: "default",
    }
})
// 當前選中
const value = defineModel();
// 監聽當前選中變化
watch(value, (val:any) => {
    // 添加頁面到可視頁面
    addView(val);
}, {
    immediate: true
})
// 可視的界面，
const viewList = ref<any>([]);
// 添加可視頁面
function addView(val: string | number) {
    // 添加延遲加載，避免組件過大導致切換卡頓
    nextTick(() => {
        setTimeout(() => {
            viewList.value.push(val);
        }, 30)
    })
}
</script>

<style scoped>
.my-stepper-header :deep(.v-avatar) {
    margin-right: 12px;
    width: 40px !important;
    height: 40px !important;
}

.my-stepper :deep(.v-stepper.v-sheet) {
    box-shadow: none;
}

.my-stepper-header {
    box-shadow: none !important;
}

.my-stepper-header :deep(.v-stepper-item) {
    padding: 4px 12px;
}

.my-stepper-header :deep(.v-divider) {
    margin: 0;
}

.my-stepper-header :deep(.v-avatar) {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid #E3E4E6;
}

.my-stepper-header :deep(.v-stepper-item--selected .v-avatar) {
    background-color: rgb(var(--v-theme-primary)) !important;
}

.my-stepper-header :deep(.v-stepper-item--selected .v-stepper-item__avatar.v-avatar) {
    border: none;
}


/* 占满高度 */
.my-stepper.h-full> :deep(.v-sheet) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.my-stepper.h-full :deep(.my-stepper-window) {
    flex: 1;
}

.my-stepper.h-full :deep(.my-stepper-window .v-window__container) {
    height: 100%;
}

.my-stepper.h-full :deep(.my-stepper-window .v-window__container .my-stepper-window-item) {
    height: 100%;
}

/* 選項卡式的 */
.my-stepper-tabs-header {
    justify-content: flex-start;
}

.my-stepper-tabs-header :deep(.my-stepper-item .v-avatar) {
    display: none;
}

.my-stepper-tabs-header :deep(.my-stepper-item) {
    padding: 0;
}
</style>